// component/bezier/bezier.js
/*
使用方法
js:
    that.setData({
      fingerEvent: event
    })

wxml:
    <bezier fingerEvent="{{fingerEvent}}"></bezier>
*/
const app = getApp();
let that;
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    fingerEvent: {
      type: Object,
      value: {},
      observer(newValue, oldValue) {
        //console.log('event', newValue);
        // 根据商品ID，获取货品
        if ( this.isDef(newValue) ){
          this.touchOnGoods(newValue);
        }
      }
    },
  },
  /**
   * 组件的初始数据
   */
  data: {
    hide_good_box: true
  },
  lifetimes: {
    attached() {
      // 在组件实例进入页面节点树时执行
      that = this;
      wx.getSystemInfo({
        success: function (res) {
          //console.log('SystemInfo', res);
          that.busPos = {};
          that.busPos['x'] = res.windowWidth * 0.625;
          that.busPos['y'] = res.windowHeight - 10;
          console.log('购物车坐标', that.busPos);
        }
      })
    },
    detached() {
      // 在组件实例被从页面节点树移除时执行
    },
    ready(){ },
  },
  pageLifetimes: {
    // 组件所在页面的生命周期函数
    show() {
      // 页面被展示
    },
    hide() {
      // 页面被隐藏
    },
    resize() {
      // 页面尺寸变化
    },
  },
  /**
   * 组件的方法列表
   */
  methods: {
    /**
    * @param sx 起始点x坐标
    * @param sy 起始点y坐标
    * @param cx 控制点x坐标
    * @param cy 控制点y坐标
    * @param ex 结束点x坐标
    * @param ey 结束点y坐标
    * @param part 将起始点到控制点的线段分成的份数，数值越高，计算出的曲线越精确
    * @return 贝塞尔曲线坐标
    */
    bezier: function (points, part) {
      let sx = points[0]['x'];
      let sy = points[0]['y'];
      let cx = points[1]['x'];
      let cy = points[1]['y'];
      let ex = points[2]['x'];
      let ey = points[2]['y'];
      var bezier_points = [];
      // 起始点到控制点的x和y每次的增量
      var changeX1 = (cx - sx) / part;
      var changeY1 = (cy - sy) / part;
      // 控制点到结束点的x和y每次的增量
      var changeX2 = (ex - cx) / part;
      var changeY2 = (ey - cy) / part;
      //循环计算
      for (var i = 0; i <= part; i++) {
        // 计算两个动点的坐标
        var qx1 = sx + changeX1 * i;
        var qy1 = sy + changeY1 * i;
        var qx2 = cx + changeX2 * i;
        var qy2 = cy + changeY2 * i;
        // 计算得到此时的一个贝塞尔曲线上的点
        var lastX = qx1 + (qx2 - qx1) * i / part;
        var lastY = qy1 + (qy2 - qy1) * i / part;
        // 保存点坐标
        var point = {};
        point['x'] = lastX;
        point['y'] = lastY;
        bezier_points.push(point);
      }
      return {
        'bezier_points': bezier_points
      };
    },
    touchOnGoods: function (e) {
      // 如果good_box正在运动
      if (!this.data.hide_good_box) return;
      this.finger = {};
      var topPoint = {};
      this.finger['x'] = e.touches["0"].clientX;
      this.finger['y'] = e.touches["0"].clientY;
      if (this.finger['y'] < this.busPos['y']) {
        topPoint['y'] = this.finger['y'] - 150;
      } else {
        topPoint['y'] = this.busPos['y'] - 150;
      }
      if (this.finger['x'] > this.busPos['x']) {
        topPoint['x'] = (this.finger['x'] - this.busPos['x']) / 2 + this.busPos['x'];
      } else {
        topPoint['x'] = (this.busPos['x'] - this.finger['x']) / 2 + this.finger['x'];
      }
      this.linePos = this.bezier([this.finger, topPoint, this.busPos], 10);
      this.startAnimation();
    },
    startAnimation: function () {
      let index = 0;
      let bezier_points = that.linePos['bezier_points'];
      let len = bezier_points.length - 1;
      this.setData({
        hide_good_box: false,
        bus_x: that.finger['x'],
        bus_y: that.finger['y']
      })
      let timer = setInterval(function () {
        index++;
        that.setData({
          bus_x: bezier_points[index]['x'],
          bus_y: bezier_points[index]['y']
        })
        if (index >= len) {
          clearInterval(timer);
          that.setData({
            hide_good_box: true,
          })
        }
      }, 35);
    },
    isDef(value) {
      return value !== undefined && value !== null;
    },
  }
})
